/* eslint-disable no-unused-vars */
import useInitState from '@/hooks/useInitialState'
import { getProfileUser } from '@/store/actions/profile'
import { Button, List, DatePicker, NavBar, Popup } from 'antd-mobile'
import classNames from 'classnames'
import { useState } from 'react'
import EditInput from './EditInput'

import styles from './index.module.scss'

const Item = List.Item

const ProfileEdit = () => {
  const { user } = useInitState(getProfileUser, 'profile')
    type InputState = {
        visible: boolean
        type: '' | 'name' | 'intro'
    }
    const [showInput, setShowInput] = useState<InputState>({
      type: '',
      visible: false
    })
    // 关闭弹层
    const hideInput = () => {
      setShowInput({
        type: '',
        visible: false
      })
    }
    return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0'
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img
                    width={24}
                    height={24}
                    src={user.photo}
                    alt=""
                  />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item arrow extra={user.name} onClick={() => setShowInput({ visible: true, type: 'name' }) }>
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {user.intro || '未填写'}
                </span>
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow extra={user.gender === 0 ? '男' : '女'}>
              性别
            </Item>
            <Item arrow extra={user.birthday}>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>
        <Popup visible={showInput.visible} position="right">
            <EditInput hideInput={hideInput} type={showInput.type} />
        </Popup>
        <div className="logout">
          <Button className="btn">退出登录</Button>
        </div>
      </div>
    </div>
    )
}

export default ProfileEdit
